import { useTaskSearchParams } from "./util";
import { useSetUrlSearchParam } from "../../utils/url";
import { Row } from "../../components/lib";
import { Button, Input } from "antd";
import { UserSelect } from "../../components/user-select";
import { TaskTypeSelect } from "../../components/task-type-select";
import { useCallback, useEffect, useState } from "react";
import { useDebounce } from "../../utils";

export const SearchPanel = () => {
  const searchParams = useTaskSearchParams();
  const setSearchParams = useSetUrlSearchParam();
  const [name, setName] = useState(searchParams.name);
  const reset = () => {
    setSearchParams({
      typeId: undefined,
      processorId: undefined,
      tagId: undefined,
      name: undefined,
    });
  };
  const debounceName = useDebounce(name, 200);

  let setUrlName = useCallback(
    (value) => {
      setSearchParams({ name: value });
    },
    [setSearchParams]
  );
  useEffect(() => {
    setUrlName(debounceName);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debounceName]);

  return (
    <Row gap={true} marginBottom={4}>
      <Input
        style={{ width: "20rem" }}
        placeholder={"任务名"}
        value={name}
        onChange={(evt) => setName(evt.target.value)}
      />
      <UserSelect
        defaultOptionName={"经办人"}
        value={searchParams.processorId}
        onChange={(value) => setSearchParams({ processorId: value })}
      />
      <TaskTypeSelect
        defaultOptionName={"类型"}
        value={searchParams.typeId}
        onChange={(value) => setSearchParams({ typeId: value })}
      />
      <Button onClick={reset}>清除筛选器</Button>
    </Row>
  );
};
